<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('finishedInventory.finishedInventory')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="distributed">
				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head">
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text"
							style="width:260rpx">{{$t('finishedInventory.inventoryDate')}}：</text>
						<view class="gui-form-body gui-text-right" @click="dateChoose">
							<view class="gui-form-input gui-text-right" v-if="fromData.chooseTime.length">
								<text>{{fromData.chooseTime[0]}}</text> {{fromData.chooseTime[1] ? '-' : ''}}
								<text>{{fromData.chooseTime[1]}}</text>
							</view>
							<input v-else type="button" class="gui-form-input gui-text-right"
								:placeholder="$t('distributedEnter.placeholderTextChoose')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text"
							style="width:200rpx">{{$t('finishedInventory.inventoryNumber')}}：</text>
						<view class="gui-form-body gui-text-right">
							<input type="text" class="gui-form-input gui-text-right" v-model="fromData.billCode"
								:placeholder="$t('distributedEnter.placeholderText')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b gui-flex gui-justify-content-center">
						<view class="gui-flex gui-space-between gui-align-items-center"
							style="width: 70%;height: 100rpx;">
							<button type="default" class="gui-button gui-button-mini gui-bg-black4 gui-noborder"
								style="width:200rpx;" @click="reset">
								<text
									class="gui-block gui-color-black gui-button-text-mini gui-icons">{{$t('distributedEnter.reset')}}</text>
							</button>
							<button type="default" class="gui-button gui-button-mini gui-bg-blue gui-noborder"
								style="width:200rpx;" @click="search">
								<text
									class="gui-block gui-color-white gui-button-text-mini gui-icons">{{$t('distributedEnter.search')}}</text>
							</button>
						</view>
					</view>
				</view>
				<!-- 底部显示区域 -->
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolower">
					<view style="height: 15rpx"></view>
					<view class="card-boxCustom" v-for="(x,i) in data.list" @click="goPage(x)" :key="i">
						<view class="card-head">
							<text>{{$t('finishedInventory.inventoryNumber')}}：{{ x.billCode }}</text>
							<gui-tags v-if="x.status == 'Audited'" :text="$t('finishedInventory.checked')"
								:customClass="['gui-transparent-bg', 'gui-color-blue']" :lineHeight="2.5" :size="12"
								borderColor="#008AFF"></gui-tags>
							<gui-tags v-else :text="$t('finishedInventory.unchecked')"
								:customClass="['gui-transparent-bg', 'gui-color-green']" :lineHeight="2.5" :size="12"
								borderColor="#39B55A"></gui-tags>
						</view>
						<view class="card-body">
							<view class="card-body-item">
								<text class="body-item-title">{{$t('finishedInventory.warehouseName')}}：</text>{{
								x.warehouseName || x.mesWarehouseCode}}
							</view>
							<view class="card-body-item">
								<text class="body-item-title">{{$t('finishedInventory.warehouseCode')}}：</text>{{
								x.warehouseCode || x.mesWarehouseCode}}
							</view>
							<view class="card-body-item">
								<text class="body-item-title">{{$t('finishedInventory.creator')}}：</text> {{
								x.createUserName }}
							</view>
							<view class="card-body-item">
								<text class="body-item-title">{{$t('finishedInventory.creationTime')}}：</text> {{
								x.creationTime }}
							</view>
						</view>
					</view>
					<view v-if="data.noticeHooks" class="noticeHooks">
						{{data.list.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without')}}
					</view>
				</scroll-view>
			</view>
			<calendarCustom ref="calendarCustomRef" @setTime="getTime" :selectTime="fromData.chooseTime">
			</calendarCustom>
		</template>
	</gui-page>
</template>
<script setup>
import searchCustom from '@/components/searchCustom';
import calendarCustom from '@/components/calendarCustom';
import { useStore } from "vuex";
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { findFGStartCheckStock } from '@/api/api.js'
// 引入
import { onShow } from '@dcloudio/uni-app';
import graceJS from "@/Grace6/js/grace.js";
import { navigate } from '@/utils/routerSkip.js';
import { basPdaOperationLogFn } from '@/utils/index.js';
import { OPERATION_SEARCH, OPERATION_REASCT, OPERATION_LOOK, OPERATION_CHOOSE } from '@/constant/index.js'
// 注册组件
components: { searchCustom, calendarCustom }

let store = useStore();
let calendarCustomRef = ref(null);

let fromData = reactive({
	chooseTime: [],
	billCode: '', // 盘点单号
	page: 1,
	rows: 10,
});

let data = reactive({
	list: [],
	noticeHooks: false, //暂无相关数据标识
});

const { ctx } = getCurrentInstance();

onMounted(() => {
	// getRequestData()
	// getSystemTimeRequest()
})
// 页面显示执行调用函数
onShow(() => {
	// getRequestData()
	getSystemTimeRequest()
})

const getSystemTimeRequest = async () => {
	if (fromData.chooseTime.length) {
		getRequestData(OPERATION_LOOK)
		return
	}
	let res = await store.dispatch('getSystemTimeRequest')
	if (res.length) {
		fromData.chooseTime.push(res)
	}
	getRequestData(OPERATION_LOOK)


}
// 跳转详情界面
const goPage = (x) => {
	//清除 缓存总store签名信息
	store.commit('delFormDataInventory')
	store.commit('delFormData')
	try {
		let inputParameter = x.billCode
		let returnParameter = '无'
		let operationPicture = '成品盘点'
		let callInterface = '无'
		let opertionParmes = {
			inputParameter,
			returnParameter,
			operationPicture,
			callInterface,
			responseCode: '无',//返回状态
			errorMessage: '无',//错误信息
			isPass: 'Y',//是否成功 Y N
			operationType: OPERATION_CHOOSE
		}
		basPdaOperationLogFn(opertionParmes)
	} catch (error) {

	}
	navigate({
		url: `/pages/finishedInventory/finishedInventoryDetailNew?id=${x.id}&billCode=${x.billCode}`
	})
}
const search = () => {
	// 搜索的时候 重置请求页数
	fromData.page = 1
	getRequestData(OPERATION_SEARCH)
}
// 重置
const reset = () => {
	fromData.chooseTime = []
	fromData.page = 1
	fromData.instockCode = ''
	getRequestData(OPERATION_REASCT)
}
//上拉加载
const scrolltolower = () => {
	if (!data.noticeHooks) {
		fromData.page++
		getRequestData()
	}
}
const dateChoose = () => {
	calendarCustomRef.value.open();
}
const getTime = (times) => {
	fromData.chooseTime = times;
}
// 请求列表数据
const getRequestData = (type) => {
	let parmes = {
		page: fromData.page,
		rows: fromData.rows,
    checkStockTimeStart: fromData.chooseTime[0] || '', //入库开始时间
    checkStockTimeEnd: fromData.chooseTime[1] ? (fromData.chooseTime[1] + ' ' + '23:59:59.0') : fromData.chooseTime[0] ? (fromData.chooseTime[0] + ' ' + '23:59:59.0') : '', //入库结束时间
		billCode: fromData.billCode //入库单号
	}
	findFGStartCheckStock(parmes).then(res => {
		try {
			console.log(res,'------res--------')
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '成品盘点'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.status,//返回状态
				errorMessage: res.message,//错误信息
				isPass: res.status == 200 ? 'Y' : 'N',//是否成功 Y N
				operationType: type
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		if (res.status == 200) {
			console.log(res.data)
			data.noticeHooks = false
			// 根据接口返回设计上拉加载相应判断
			if (fromData.page === 1) {
				if (res.data.rows.length == 0) {
					data.noticeHooks = true
				}
				data.list = res.data.rows
			} else {
				data.list = [...data.list, ...res.data.rows]
			}
			data.noticeHooks = data.list.length >= res.data.total

		}
	})
}
</script>


<style lang="scss" scoped>
.distributed-head {
	border-bottom-left-radius: 16rpx;
	border-bottom-right-radius: 16rpx;
}

.noticeHooks {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 32rpx;
	color: #999;
}

.scroll {
	flex: 1;
	height: 2rpx;
}

.distributed {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
	// height: 100vh;
}

.card-box {
	margin: 0 15rpx;
	box-shadow: 0rpx 0rpx 4rpx 0 #A5A5A5;
	background: #fff;
	padding: 30rpx;
	border-radius: 16rpx;
}

.card-item {
	line-height: 60rpx;
}

.card-bottom {
	margin-bottom: 30rpx;
}

.filtrate-item {
	display: flex;
	align-items: center;
	font-size: 32rpx;
	margin-bottom: 20rpx;

	.filtrate-itemLeft {
		height: 32rpx;
		line-height: 32rpx;
		width: 100rpx;
	}

	.filtrate-itemRight {
		border: 2rpx solid #A5A5A5;
		border-radius: 8rpx;
		overflow: hidden;
		line-height: 40rpx;
		width: 300rpx;
	}
}
</style>
